import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
  FlatList
} from "react-native";
import Toast from "react-native-simple-toast";
import { connect } from "react-redux";
import HeaderDefault from "../../components/header/HeaderDefault";
import { getTodayInfuseTask } from "../../netServer/advicePerform";
import { dateTransform } from "../../utils/utils_date";
import { Empty } from "../../components/Empty/Empty";

class Infusion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      taskList: [],
      isFresh: false,
      selectOralMedic: null
    };
  }
  static navigationOptions = ({ navigation }) => ({
    header: <HeaderDefault backBtnOnPress={navigation.goBack} title="输液" />
  });

  componentDidMount() {
    this._loadData();
  }

  _ListEmptyComponent = () => {
    return <Empty titleStr="暂时没有相关的数据" />;
  };

  _refreshData = () => {
    this.setState({
      isFresh: true
    });
    this._loadData();
  };

  _loadData = () => {
    let params = new FormData();

    let { user_id } = this.props.user_info;
    params.append("userId", user_id);

    getTodayInfuseTask(params, resp => {
      let { code, data = [], msg } = resp;

      if (code == "0") {
        this.setState({
          taskList: data,
          isFresh: false
        });
      } else {
        this.setState({
          taskList: [],
          isFresh: false
        });
        Toast.showWithGravity(msg, 0.3, Toast.CENTER);
      }
    });
  };
  _keyExtractor = (item, index) => "shuye" + index;

  _separator = () => {
    return <View style={{ height: 1, backgroundColor: "#efefef" }} />;
  };

  _jumpIntoScan = item => {
    this.setState({
      selectOralMedic: item
    });
    if (item.status === "待执行") {
      let { task_id, main_task_id, advise_no, patient_no } = item;

      this.props.navigation.navigate("SignScan", {
        nextRouter: "InfusionResult",
        adviseNo: advise_no,
        patient_no: patient_no,
        successGoBack: this._loadData,

        task_id: task_id,
        main_task_id: main_task_id
      });
    }
  };

  _renderItem = ({ item }) => {
    let { use_time } = item;

    let dt = use_time ? new Date(use_time.replace(/-/g, "/")) : null;
    return (
      <TouchableOpacity
        onPress={() => {
          this._jumpIntoScan(item);
        }}
      >
        <View
          style={{
            width: screenWidth,
            backgroundColor: "white",
            borderBottomColor: "#efefef",
            borderBottomWidth: 1,
            flexDirection: "row",
            alignItems: "center"
          }}
        >
          <Text
            style={{
              color: "blue",
              fontSize: 16,
              width: 60,

              textAlign: "center"
            }}
          >
            {dt ? dateTransform(dt, "hh:mm") : null}
          </Text>

          <View style={{ flex: 1, paddingLeft: 10 }}>
            {item.advList.map((value, index) => {
              return (
                <View key={"yizhuzhixingse" + index}>
                  <Text style={{ lineHeight: 30 }}>{value.medName}</Text>
                  <Text style={{ lineHeight: 30 }}>
                    {value.standard}/{value.use_unit}
                  </Text>
                </View>
              );
            })}
          </View>
          <View
            style={{
              width: 80,
              height: 80,
              paddingTop: 10,
              paddingBottom: 10,
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <Text style={{ lineHeight: 30, fontWeight: "bold" }}>
              {item.bed_no}
            </Text>
            <Text style={{ lineHeight: 30, color: "#e30000" }}>
              {item.status}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  _headerComponent() {
    return (
      <View
        style={{
          width: screenWidth,
          height: 30,
          paddingLeft: 10,
          paddingRight: 10,
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          borderBottomColor: "#efefef",
          borderBottomWidth: 1
        }}
      >
        <Text>时间</Text>
        <Text>药品名</Text>
        <Text>床号/状态</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        {this._headerComponent()}

        <FlatList
          refreshing={this.state.isFresh}
          onRefresh={this._refreshData}
          ListEmptyComponent={this._ListEmptyComponent}
          style={{ flex: 1 }}
          ItemSeparatorComponent={this._separator}
          data={this.state.taskList}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white"
  }
});

function select(store) {
  return { user_info: store.userInfo.user_info };
}

export default connect(select)(Infusion);
